<template>
  <div class="UserAgreement">
    <div class="title">内容管理-用户协议管理</div>
    <div class="UserAg_bg">
      <div class="UserAg_btn">
        <div
          v-for="(item,index) in btnlist"
          :key="index"
          @click="doClick(index)"
          :class="{active:item.isActive}"
        >{{item.name}}</div>
      </div>
      <!--平台用户协议管理-->
      <div class="lcontent lcontH">
        <div v-show="editorSta">
          <wangEditor
            defaultId="user"
            :value="userEditor"
            @input="html=>{handleEditorChange('user',html)}"
          ></wangEditor>
        </div>
        <div v-show="!editorSta">
          <wangEditor
            defaultId="company"
            :value="companyEditor"
            @input="html=>{handleEditorChange('company',html)}"文章标题
          ></wangEditor>
        </div>

        <el-button class="editor-button" @click="saveEditor">保存</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import wangEditor from '../../components/wangEditor'
export default {
  name: 'UserAgreement',
  data() {
    return {
      btnlist: [
        { name: '人才用户协议管理', isActive: true },
        { name: '企业用户协议管理', isActive: false }
      ],
      fileList: [],
      limitNums: 1,
      id: '1',
      data: {
        userEditorId: '',
        companyEditorId: ''
      },
      userEditor: '',
      companyEditor: '',
      editorSta: true,
      htmlUserEditor: '',
      htmlCompanyEditor: ''
    }
  },
  methods: {
    initData() {
      this.lAxios({
        method: 'post',
        url: '/platform/selectStaticData.do',
        params: {
          state: '1,2'
        }
      }).then(res => {
        // this.$set('data', 'userEditor', res.data.data[1][0])
        // this.$set('data', 'companyEditor', res.data.data[2][0])
        console.log(res)
        this.data.userEditorId = res.data.data[1][0].id
          ? res.data.data[1][0].id
          : ''
        this.data.companyEditorId = res.data.data[2][0].id
          ? res.data.data[2][0].id
          : ''
        this.userEditor = res.data.data[1][0].content
          ? res.data.data[1][0].content
          : ''
        this.companyEditor = res.data.data[2][0].content
          ? res.data.data[2][0].content
          : ''
        this.htmlUserEditor = res.data.data[1][0].content
          ? res.data.data[1][0].content
          : ''
        this.htmlCompanyEditor = res.data.data[2][0].content
          ? res.data.data[2][0].content
          : ''
      })
    },

    doClick(obj) {
      this.editorSta = !this.editorSta
      this.btnlist.forEach(item => {
        item.isActive = false
      })
      this.btnlist[obj].isActive = true
      this.id = obj == 0 ? '1' : '2'
      this.urlName = ''
      console.log(this.btnlist)
    },
    handleEditorChange(p, html) {
      console.log(p)
      console.log(html)
      if (p == 'user') {
        this.htmlUserEditor = html
      } else {
        this.htmlCompanyEditor = html
      }
    },
    saveEditor() {
      //保存富文本内容
      let id = ''
      let ids = ''
      let url = ''
      var data = new FormData();
      if (this.data.userEditorId == '' && this.btnlist[0].isActive) {
        //平台用户协议新增
        id = 1
        url = '/platform/addStaticData.do'
        data.append("content", this.htmlUserEditor);
        ids = this.data.userEditorId
      } else if (this.data.userEditorId != '' && this.btnlist[0].isActive) {
        //平台用户协议编辑
        id = 1
        url = '/platform/updateStaticData.do'
        data.append("content", this.htmlUserEditor);
        ids = this.data.userEditorId
      } else if (this.data.companyEditorId == '' && this.btnlist[1].isActive) {
        id = 2
        url = '/platform/addStaticData.do'
        data.append("content", this.htmlCompanyEditor);
        ids = this.data.companyEditorId
      } else {
        id = 2
        url = '/platform/updateStaticData.do'
        data.append("content", this.htmlCompanyEditor);
        ids = this.data.companyEditorId
      }

      data.append('id', ids+'')
      data.append('typeId', id+'')
      data.append('num', 1+'')
      this.lAxios({
        method: 'post',
        url: url,
        data,
        headers: {'Content-type':  'application/x-www-form-urlencoded; charset=UTF-8'},
      }).then(res => {
        res = res.data;
        if(res.status==0){
           this.$message.success("保存成功")
        }else{
          this.$message.error("保存失败")
        }
        this.initData()
      })
    }
  },
  mounted() {
    this.initData()
  },
  components: {
    wangEditor
  }
}
</script>

<style scoped>
.UserAgreement {
  width: 99%;
  height: 100vh;
  margin-left: 1%;
  background-color: #f7f9fc;
  font-size: 12px;
}
.title {
  height: 33px;
  line-height: 33px;
}
.UserAg_bg {
  width: 100%;
  height: 600px;
  background-color: white;
}
.UserAg_btn {
  display: flex;
  flex-direction: row;
  margin-left: 48px;
  padding-top: 29px;
  color: #333;
  cursor: default;
}
.UserAg_btn > div {
  width: 162px;
  height: 51px;
  font-size: 14px;
  border: 1px solid #f7f7f7;
  line-height: 51px;
  text-align: center;
  border-radius: 5px;
}
.UserAg_btn > div:nth-child(1) {
  margin-right: 57px;
}
.active {
  background-color: #3377ff;
  color: white;
}
.lcontent {
  padding: 40px 40px;
}
.lcontH {
  height: 40px;
  line-height: 40px;
}
.editor-button {
  margin: 20px 0 0 0;
  padding: 5px 30px;
  background: #3377ff;
  color: #fff;
  border: none;
}
.browse {
  width: 140px;
  margin-right: 30px;
  margin-top: 8px;
}
.linp {
  width: 300px;
  height: 40px;
  border: 1px solid #dee4f0;
  margin-right: 20px;
}
.font {
  font-size: 14px;
  font-weight: bold;
  margin-right: 15px;
  margin-top: 8px;
}
.fontT {
  width: 302px;
  height: 40px;
  text-align: center;
  background-color: #fcf8e3;
  border-radius: 5px;
  margin-top: 8px;
}
</style>
